<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-11-13 13:48:09
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-07 15:49:45
-->
<template>
  <Card :bordered="false">
    <div class="order-progress" :class="`progress-${progress}`">
      <ul>
        <li>
          <span>下单时间</span>
          <div class="tip">{{ record.create_time }}</div>
        </li>
        <li>
          <span>付款</span>
          <div v-if="record.pay_status == PayStatusEnum['SUCCESS'].value" class="tip"
            >付款于 {{ record.pay_time }}</div
          >
        </li>
        <li>
          <span>发货</span>
          <div v-if="record.delivery_status == DeliveryStatusEnum['COMPLETE'].value" class="tip"
            >发货于 {{ record.delivery_time }}</div
          >
        </li>
        <li>
          <span>收货</span>
          <div v-if="record.receipt_status == ReceiptStatusEnum['RECEIVED'].value" class="tip"
            >收货于 {{ record.receipt_time }}</div
          >
        </li>
        <li>
          <span>完成</span>
          <div v-if="record.order_status == OrderStatusEnum['COMPLETED'].value" class="tip"
            >完成于 {{ record.receipt_time }}</div
          >
        </li>
      </ul>
    </div>
  </Card>
</template>

<script setup lang="ts">
  import {
    DeliveryStatusEnum,
    OrderStatusEnum,
    PayStatusEnum,
    ReceiptStatusEnum,
  } from '/@/common/enum/order';
  import { Card } from 'ant-design-vue';

  import { ref, onMounted } from 'vue';
  import { OrderRecordModel } from '/@/views/order/model';
  let progress = ref(2);
  const props = defineProps<{
    record: OrderRecordModel;
  }>();
  // 步骤条位置
  const initProgress = () => {
    progress.value = 2;
    props.record.pay_status === PayStatusEnum['SUCCESS'].value && (progress.value += 1);
    props.record.delivery_status === DeliveryStatusEnum['COMPLETE'].value && (progress.value += 1);
    props.record.receipt_status === ReceiptStatusEnum['RECEIVED'].value && (progress.value += 1);
  };
  onMounted(() => {
    props.record && initProgress();
  });
</script>

<style lang="less" scoped>
  @primary-color: rgb(24, 144, 255);
  // 步骤条
  .order-progress {
    height: 26px;
    line-height: 26px;
    background: #f8f8f8;
    border-radius: 13px;
    font-size: 14px;
    text-align: center;
    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: 13px;
      background: @primary-color;
    }

    &::after {
      background: rgb(24 144 255 / 30%);
      z-index: 1;
    }

    &.progress-1 {
      &::before {
        width: 0;
      }

      &::after {
        width: 20%;
      }
    }

    &.progress-2 {
      &::before {
        width: 20%;
      }

      &::after {
        width: 40%;
      }
    }

    &.progress-3 {
      &::before {
        width: 40%;
      }

      &::after {
        width: 60%;
      }
    }

    &.progress-4 {
      &::before {
        width: 60%;
      }

      &::after {
        width: 80%;
      }
    }

    &.progress-5 {
      &::before {
        width: 100%;
      }

      &::after {
        width: 100%;
      }

      li {
        &:nth-child(5) {
          color: #fff;
        }
      }
    }

    li {
      width: 20%;
      float: left;
      border-radius: 13px;
      position: relative;
      z-index: 3;
    }

    .tip {
      font-size: 12px;
      padding-top: 10px;
      color: #8c8c8c;
    }

    &.progress-1 li:nth-child(1),
    &.progress-2 li:nth-child(1),
    &.progress-3 li:nth-child(1),
    &.progress-4 li:nth-child(1),
    &.progress-5 li:nth-child(1) {
      color: #fff;
    }

    &.progress-2 li:nth-child(2),
    &.progress-3 li:nth-child(2),
    &.progress-4 li:nth-child(2),
    &.progress-5 li:nth-child(2) {
      color: #fff;
    }

    &.progress-3 li:nth-child(3),
    &.progress-4 li:nth-child(3),
    &.progress-5 li:nth-child(3) {
      color: #fff;
    }

    &.progress-4 li:nth-child(4),
    &.progress-5 li:nth-child(4) {
      color: #fff;
    }
  }
</style>
